<!DOCTYPE html>
<html>
<head>
<title>Quantum Potential V(x)</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f8f9fa;
  }
  canvas {
    border: 1px solid #dee2e6;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="320"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style and Configuration ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;
  ctx.font = '18px serif';

  // --- Coordinate System Parameters ---
  const originX = 220;
  const originY = 250;
  const axisLeft = 50;
  const axisRight = 450;
  const aValue = 140; // Pixel distance for 'a'
  const wallX = originX - aValue;
  const potentialTopY = 40;

  // --- Draw Axes ---
  // X-axis
  ctx.beginPath();
  ctx.moveTo(axisLeft, originY);
  ctx.lineTo(axisRight, originY);
  ctx.stroke();

  // Arrow for X-axis
  ctx.beginPath();
  ctx.moveTo(axisRight, originY);
  ctx.lineTo(axisRight - 10, originY - 5);
  ctx.moveTo(axisRight, originY);
  ctx.lineTo(axisRight - 10, originY + 5);
  ctx.stroke();
  
  // The V(x) axis is implicitly represented by the potential spike

  // --- Draw Potential V(x) ---
  // Infinite wall at x = -a
  ctx.beginPath();
  ctx.moveTo(wallX, originY);
  ctx.lineTo(wallX, potentialTopY);
  ctx.stroke();

  // Delta potential spike at x = 0
  const spikeBaseWidth = 14;
  const spikeTopWidth = 4;
  
  // Draw the filled shape of the spike, approximating the hand-drawn look
  ctx.beginPath();
  ctx.moveTo(originX - spikeBaseWidth / 2, originY);
  ctx.lineTo(originX - spikeTopWidth / 2, potentialTopY);
  ctx.lineTo(originX + spikeTopWidth / 2, potentialTopY);
  ctx.lineTo(originX + spikeBaseWidth / 2, originY);
  ctx.closePath();
  ctx.fill();

  // Draw a white line in the middle to create the 'hollow' effect seen in the original
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(originX, originY - 2); // Start slightly above the axis line for a clean look
  ctx.lineTo(originX, potentialTopY);
  ctx.stroke();
  
  // Reset styles for text and other lines
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;
  ctx.fillStyle = 'black';


  // --- Add Labels ---
  // Axis and point labels
  ctx.font = 'italic 18px serif';
  ctx.textAlign = 'center';
  ctx.fillText('0', originX, originY + 22);
  ctx.fillText('-a', wallX, originY + 22);
  
  ctx.textAlign = 'left';
  ctx.fillText('x', axisRight + 10, originY + 6);
  ctx.fillText('V(x)', originX + 15, potentialTopY - 5);

  // Region labels
  ctx.font = '24px serif';
  ctx.textAlign = 'center';
  ctx.fillText('I', originX - aValue / 2, originY - 100);
  ctx.fillText('II', originX + aValue / 2, originY - 100);

  // Figure caption
  ctx.font = '16px serif';
  ctx.textAlign = 'center';
  ctx.font = 'normal 16px Times New Roman';
  ctx.fillText('Fig. 1.19', canvas.width / 2, 300);

</script>
</body>
</html>